<template>
	<view>
		<u-navbar title="个人中心" @rightClick="rightClick" :autoBack="true" :bgColor="bgColor" rightIcon='more-circle'>
		</u-navbar>
		<u-swiper :height="devWidth" :list="swiperList" keyName="url" :autoplay="false" indicator indicatorMode="dot"
			circular></u-swiper>

		<view class="goodsInfo">
			<view class="price_share">
				<view class="price">
					<view class="dw">
						￥
					</view>
					{{info.price}}
				</view>
				<u-icon name="share-square" size="48rpx"></u-icon>
			</view>
			<view class="goodsTitle">
				{{info.store_name}}
			</view>
			<view class="sale_stock">
				<view>
					划线价:￥{{info.ot_price}}
				</view>
				<view>
					库存:{{info.stock}}件
				</view>
				<view>
					销量:{{info.fsales}}件
				</view>
			</view>
		</view>
		<view class="couponPop">
			<u-cell-group>
				<u-cell isLink @click="couponShow = true">
					<view slot="title" class="coupon_style">
						<text>
							优惠券：
						</text>
						<view v-for="item in couponList.slice(0, 2)" :key="item.id" class="coupon_item">
							满{{item.use_min_price}}减{{item.coupon_price}}
						</view>
					</view>
				</u-cell>
			</u-cell-group>
		</view>
		<u-popup zIndex='30000' :show="couponShow" mode="bottom" :round="10" overlay @close="couponClose"
			@open="couponOpen">


			<view class="coupon-container">
				<view class="title">
					通用券
				</view>
				<scroll-view scroll-y="true">
					<view class="couponList">
						<view class="coupon" v-for="item in couponList" :key="item.id">
							<view class="left">
								<view class="money">
									<view class="dw">￥</view>
									{{item.coupon_price}}
								</view>
								<view class="limit">满{{item.use_min_price}}元可用</view>
							</view>
							<view class="right">
								<view class="top">
									<view class="type">通用券</view>
									{{item.title}}
								</view>
								<view class="bottom">
									<view class="deadline">领取后{{item.coupon_time}}天内可用</view>
									<view class="get">立即领取</view>
								</view>
							</view>
						</view>

					</view>
				</scroll-view>
			</view>

		</u-popup>

		<view class="specifications">
			<u-cell-group v-if="is_sp_select">
				<u-cell isLink @click="goodsShow = true">
					<view slot="title" class="sp_style">
						<text class="notice">
							已选择：
						</text>
						<view class="sku_info">
							<view class="txt">
								{{sku_name}}
							</view>
							<view class="sku_img_select">

								<image class="img_item" :src="ele" v-for="(ele,index) in img_show.slice(0,4)"
									:key="index" />

								<view class="select">
									共{{img_show.length}}种规格可选
								</view>
							</view>
						</view>
					</view>

				</u-cell>
			</u-cell-group>
			<u-cell-group v-else-if="!is_sp_select">
				<u-cell isLink @click="goodsShow = true">
					<view slot="title" class="sp_style">
						<text class="notice">
							请选择：
						</text>
						<view class="sku_info">
							<view class="txt">
								please select
							</view>
							<view class="sku_img_select">

								<image class="img_item" :src="ele" v-for="(ele,index) in img_show.slice(0,4)"
									:key="index" />

								<view class="select">
									共{{img_show.length}}种规格可选
								</view>
							</view>
						</view>
					</view>

				</u-cell>
			</u-cell-group>
		</view>


		<view class="tabBar">
			<view class="" @click="backHome">
				<u-icon name="home" labelSize="18rpx" labelPos="bottom" label="首页" size="48rpx"></u-icon>
			</view>
			<view class="" @click="collect_goods" v-if="isCollect">
				<u-icon name="heart-fill" color="#f00" labelSize="18rpx" labelPos="bottom" label="收藏"
					size="48rpx"></u-icon>
			</view>
			<view class="" @click="collect_goods" v-else>
				<u-icon name="heart" labelSize="18rpx" labelPos="bottom" label="收藏" size="48rpx"></u-icon>
			</view>
			<view class="buyCart" @click="switch_cart">
				<u-icon name="shopping-cart" labelSize="18rpx" labelPos="bottom" label="购物车" size="48rpx"></u-icon>
				<view class="cart-num-c">
					<u-badge bgColor='#f00' max="9" :value="cartCount"></u-badge>
				</view>
			</view>
			<view class="cart_buy" @click="Cart_buy">
				<view class="cart" @click="toCart">加入购物车</view>
				<view class="buy" @click="toBuy">立即购买</view>
			</view>
		</view>

		<u-popup class="goodsPopStyle" :show="goodsShow" mode="bottom" closeable :round="10" @close="goodsClose">

			<scroll-view scroll-y="true">
				<view class="sku-container">
					<view class="goods-info">
						<view class="item">
							<view class="left">
								<view class="avatar">
									<image :src="info.image" mode="widthFix"></image>
								</view>

							</view>
							<view class="right">
								<view class="title">
									{{info.store_name}}
								</view>
								<view class="price_stock" v-if="productAttr.length > 0">
									<view class="price">¥ {{sku_show.price *goodsCount }}</view>
									<view class="stock">库存:{{sku_show.stock}}</view>
								</view>
								<view class="price_stock" v-else>
									<view class="price">¥ {{info.price*goodsCount}}</view>
									<view class="stock">库存:{{info.stock}}</view>
								</view>
							</view>

						</view>
					</view>
					<view class="sku_list">

						<view class="sku_item" v-for="ele in productAttr" :key="ele.id">
							<view class="attr_name">{{ele.attr_name}}</view>
							<view class="attr_list">

								<view @click="checkAttr(val, ele.attr_value,ele.attr_name)" class="attr_item"
									:class="val.check ? 'active':''" v-for="val in ele.attr_value" :key="val.attr">
									{{val.attr}}
								</view>




							</view>
						</view>
					</view>
					<view class="step_container">
						<view class="title">
							数量
						</view>
						<view class="step">
							<u-number-box v-model="goodsCount" />
						</view>
					</view>
				</view>
			</scroll-view>
		</u-popup>

	</view>

</template>

<script>
	import {
		GetColleceList
	} from '@/config/api.js'
	export default {
		data() {
			return {
				id: -1,
				info: {},
				bgColor: 'transparent',
				swiperList: [],
				devWidth: '750rpx',
				couponList: [],
				couponShow: false,
				goodsShow: false,
				productAttr: [],
				goodsCount: 1,
				productValue: {},
				checkSku: {},
				sku_name: '',
				sku_show: {},
				img_show: [],
				is_sp_select: false,
				cartCount: 0,
				isCollect: false,
			}
		},
		onLoad(options) {
			console.log('onLoad 生命周期函数，会在页面加载的时候执行，并且把其他页面传递的参数通过方法的参数传递过来', options);
			this.id = options.id;
			this.getDetailApi();
			this.getCartCount();

		},
		methods: {
			async collect_goods() {
				if (this.isCollect) {
					uni.request({
						url: 'https://shoptest1.52kfw.cn/api/collect/del',
						method: "POST",
						header: {
							'Authori-zation': 'Bearer ' + uni.getStorageSync('token')
						},
						data: {
							"id": [Number(this.id)],
							"category": "product"
						},
						success: (res) => {
							// console.log('res', res.data);
							this.isCollect = !this.isCollect
							uni.showToast({
								title: '取消收藏',
								icon: 'none',
							});
							// console.log(this.isCollect);
						}
					})
				} else {
					uni.request({
						url: 'https://shoptest1.52kfw.cn/api/collect/add',
						method: "POST",
						header: {
							'Authori-zation': 'Bearer ' + uni.getStorageSync('token')
						},
						data: {
							"id": Number(this.id),
							"product": "product"
						},
						success: (res) => {
							// console.log('res', res.data);
							this.isCollect = !this.isCollect
							uni.showToast({
								title: '收藏成功',
								icon: 'none',
							});
							// console.log(this.isCollect);
						}
					})
				}
				
				// this.getDetailApi()
			},
			switch_cart() {
				uni.switchTab({
					url: '/pages/cart/cart',
				})
			},
			backHome() {
				uni.switchTab({
					url: '/pages/index/index',
				})
			},
			getCartCount() {
				uni.request({
					url: 'https://shoptest1.52kfw.cn/api/cart/count',
					header: {
						'Authori-zation': 'Bearer ' + uni.getStorageSync('token')
					},
					data: {
						"numType": 0
					},
					success: (res) => {
						// console.log('cartCount', res.data.data);
						this.cartCount = res.data.data.count
					}
				})
			},
			toCart() {
				if (!this.goodsShow) return
				if (this.sku_show.stock <= 0) {
					uni.showToast({
						title: '该商品已售罄',
						icon: 'none'
					});
					return;
				}
				let unique = this.sku_show.unique
				uni.request({
					url: 'https://shoptest1.52kfw.cn/api/cart/add',
					method: "POST",
					header: {
						'Authori-zation': 'Bearer ' + uni.getStorageSync('token')
					},
					data: {
						"productId": this.id,
						"cartNum": this.goodsCount,
						"new": 0,
						"uniqueId": unique,
						"virtual_type": 0
					},
					success: (res) => {
						// console.log('res', res.data);
						uni.showToast({
							title: '加入购物车',
							icon: 'none',
						});
						this.getCartCount()
					}
				})
			},
			toBuy() {
				if (!this.goodsShow) return
				console.log('buy');
			},
			checkAttr(attr, allAttr, attr_name) {
				allAttr.map(v => {
					v.check = false;
				})
				attr.check = true;
				this.checkSku[attr_name] = attr.attr;
				this.sku_name = Object.values(this.checkSku).join(',');
				// console.log(this.sku_name);
				this.change_sku_show();
				this.is_sp_select = true
			},
			change_sku_show() {
				Object.keys(this.productValue).forEach(v => {
					if (v == this.sku_name) {
						this.sku_show = this.productValue[v]
					}
				})
			},
			goodsOpen() {},
			goodsClose() {
				this.goodsShow = false;
			},
			Cart_buy() {
				if (this.goodsShow) return
				let token = uni.getStorageSync('token')
				if (!token) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				} else {
					this.goodsShow = true;
				}
			},
			couponOpen() {
				// console.log('open');
			},
			couponClose() {
				this.couponShow = false
				// console.log('close');
			},
			rightClick() {
				console.log('rightClick');
			},
			leftClick() {
				console.log('leftClick');
			},
			getDetailApi() {
				uni.request({
					url: 'http://106.52.75.114/api/product/detail/' + this.id,
					success: (res) => {
						console.log('res 商品详情', res.data);
						this.couponList = res.data.data.coupons;
						let temp = res.data.data.productAttr;
						temp.map(v => {
							v.attr_value[0].check = true;
						})
						this.productValue = res.data.data.productValue;
						this.productAttr = temp;
						Object.values(this.productValue).forEach(v => {
							this.img_show.push(v.image);
						});
						this.productAttr.forEach(v => {
							this.checkSku[v.attr_name] = v.attr_values[0]
							this.sku_name = Object.values(this.checkSku).join(',');
							// console.log(this.checkSku);
						})
						this.change_sku_show();

						this.info = res.data.data.storeInfo;
						this.info.slider_image.forEach(item => {
							let obj = {
								url: item
							};
							this.swiperList.push(obj);
						})
						if (this.info.video_link) {
							this.swiperList[0].poster = this.swiperList[0].url;
							this.swiperList[0].url = this.info.video_link;
						}

						this.isCollect = this.info.userCollect
						console.log('collect:', this.isCollect);

					}
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	page {
		background-color: #f0f0f0;
		padding-bottom: 100rpx;
	}

	.goodsInfo {
		padding: 30rpx;
		box-sizing: border-box;
		background-color: #fff;

		.price_share {
			display: flex;
			justify-content: space-between;

			.price {
				color: #fd5232;
				font-size: 48rpx;
				font-weight: bold;
				display: flex;
				line-height: 48rpx;

				.dw {
					font-size: 28rpx;
					line-height: 62rpx;
				}
			}
		}

		.goodsTitle {
			font-size: 32rpx;
			font-weight: bold;
			margin: 20rpx 0;
		}

		.sale_stock {
			display: flex;
			justify-content: space-between;
			color: #82848f;
			font-size: 24rpx;
		}
	}

	.coupon_style {
		display: flex;
		color: #82848f;

		.coupon_item {
			border: 1px solid skyblue;
			padding: 0 20rpx;
			font-size: 24rpx;
			color: skyblue;
			margin-left: 14rpx;
			font-weight: bold;
			position: relative;
			// overflow: hidden;
		}

		.coupon_item::before {
			content: "";
			position: absolute;
			width: 6rpx;
			height: 10rpx;
			background-color: #fff;
			border-radius: 0 10rpx 10rpx 0;
			left: -1rpx;
			top: 14rpx;
			border: 1rpx solid skyblue;
			border-left-color: #fff;
		}

		.coupon_item::after {
			content: "";
			position: absolute;
			width: 6rpx;
			height: 10rpx;
			background-color: #fff;
			border-radius: 10rpx 0 0 10rpx;
			right: -1rpx;
			top: 14rpx;
			border: 1rpx solid skyblue;
			border-right-color: #fff;
		}
	}

	.couponPop {
		background-color: #fff;
	}

	.coupon-container {

		height: 800rpx;

		.title {
			text-align: center;
			border-bottom: 1rpx solid #f0f0f0;
			padding: 20rpx 0;
			font-weight: bold;
		}

		.couponList {
			height: 700rpx;
			display: flex;
			flex-direction: column;
			gap: 20rpx;
			padding: 20rpx;
			box-sizing: border-box;
		}

		.coupon {
			display: flex;
			height: 170rpx;
			border: 1rpx solid #f0f0f0;

			.left {

				color: #fff;
				width: 220rpx;
				height: 170rpx;
				background-color: #1db0fc;
				text-align: center;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				background-image: url();
				background-repeat: no-repeat;
				background-size: 100% 100%;

				.money {
					display: flex;
					font-size: 60rpx;
					line-height: 60rpx;
					font-weight: 400;

					.dw {
						font-size: 36rpx;
						line-height: 78rpx;
					}
				}

				.limit {
					font-size: 24rpx;
				}
			}

			.right {
				padding: 20rpx;
				flex: 1;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.top {
					display: flex;
					align-items: center;
					font-size: 26rpx;
					gap: 20rpx;
					font-weight: bold;

					.type {
						height: 28rpx;
						font-weight: 400;
						font-size: 18rpx;
						background-color: #e6f3fe;
						border: 1rpx solid #1db0fc;
						color: #1db0fc;
						border-radius: 20rpx;
						padding: 0 10rpx;
					}
				}

				.bottom {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.deadline {
						font-size: 20rpx;
						color: #82848f;
					}

					.get {
						font-size: 22rpx;
						height: 50rpx;
						width: 132rpx;
						line-height: 50rpx;
						text-align: center;
						box-sizing: border-box;
						color: #fff;
						background-color: #1db0fc;
						border-radius: 30rpx;
					}
				}
			}
		}

	}


	.tabBar {
		width: 100%;
		position: fixed;
		bottom: 0;
		z-index: 20000;
		background-color: #fff;
		display: flex;
		justify-content: space-evenly;
		padding: 10rpx 0;

		.buyCart {
			position: relative;

			.cart-num-c {
				position: absolute;
				right: -16rpx;
				top: 0;
			}
		}

		.cart_buy {
			display: flex;
			border-radius: 40rpx;
			width: 444rpx;
			height: 79rpx;
			line-height: 79rpx;
			text-align: center;
			overflow: hidden;
			color: #fff;

			.cart {
				background-color: #22cafd;
				flex: 1;
			}

			.buy {
				background-color: #1db0fc;
				flex: 1;
			}
		}
	}


	.sku-container {
		height: 800rpx;
		padding: 20rpx;

		.goods-info {

			// height: 600rpx;
			.item {
				display: flex;

				>.left {
					margin-right: 30rpx;

					.avatar {
						image {
							width: 160rpx;
							height: 160rpx;
						}
					}
				}

				>.right {
					>.title {
						padding-right: 50rpx;
						font-size: 32rpx;
						color: #202020;
						margin-bottom: 28rpx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						/* 设置最多显示的行数 */
						overflow: hidden;

					}

					>.price_stock {
						.price {
							font-size: 36rpx;
							color: #fd502f;
							margin-bottom: 4rpx;
						}

						.stock {
							font-size: 24rpx;
							color: #999;
						}
					}

				}
			}
		}

		.sku_list {
			margin: 10rpx 0;

			.sku_item {
				margin: 10rpx 0;

				.attr_name {
					font-size: 30rpx;
					color: #999;
					padding: 10rpx 0;
				}

				.attr_list {
					.attr_item {
						display: inline-block;
						border: 2rpx solid #f2f2f2;
						font-size: 26rpx;
						color: #282828;
						padding: 6rpx 32rpx;
						border-radius: 24rpx;
						margin: 20rpx 0 0 14rpx;
						background-color: #f2f2f2;

						&.active {
							background-color: #e6f3fe;
							color: #1db0fc;
							border-color: #1db0fc;
						}

					}
				}
			}
		}

		.step_container {
			margin: 20rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 120rpx;

			>.title {
				font-size: 30rpx;
				color: #999;

			}

			.step {}
		}
	}

	.specifications {
		background-color: #fff;
		margin: 20rpx 0;

		.sp_style {
			display: flex;
			width: 100%;

			.sku_info {
				flex: 1;


				.txt {
					box-sizing: border-box;
					margin-bottom: 10rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					/* 设置最多显示的行数 */
					overflow: hidden;
				}
			}
		}

		.notice {
			color: #aaa;
		}



		.img_item {
			width: 66rpx;
			height: 66rpx;
			border-radius: 10rpx;
		}

		.sku_img_select {
			display: flex;
			width: 100%;
			justify-content: space-between;
			align-items: center;

			.select {
				height: 50rpx;
				font-size: 24rpx;
				background-color: #f0f0f0;
				line-height: 50rpx;
				padding: 0 10rpx;
			}
		}
	}
</style>